<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>财务管理</title>
    <meta name="description" content="">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta name="robots" content="all,follow">
    <!-- Bootstrap CSS-->
    <link rel="stylesheet" href="https://cdn.bootcss.com/twitter-bootstrap/4.3.0/css/bootstrap.min.css">
    <!-- Font Awesome CSS-->
    <link rel="stylesheet" href="../../static/vendor/font-awesome/css/font-awesome.min.css">
    <!-- Fontastic Custom icon font-->
    <link rel="stylesheet" href="../../static/css/fontastic.css">
    <!-- Google fonts - Poppins -->
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Poppins:300,400,700">
    <!-- theme stylesheet-->
    <link rel="stylesheet" href="http://cdn.jie12366.xyz/style.default.css" id="theme-stylesheet">
    <!-- Favicon-->
    <link rel="shortcut icon" href="../../static/img/favicon.ico">
    <style>
        .btn-pos{
            margin-left: 1200px;
            width: 80px;
            margin-top: 10px;
            margin-bottom: 10px;
        }
        @media screen and (min-width: 992px) and (max-width: 1400px){
            .btn-pos {
                margin-left: 900px;
            }
        }
        @media screen and (min-width: 768px) and (max-width: 992px){
            .btn-pos {
                margin-left: 600px;
            }
        }
        @media screen and (max-width: 768px){
            .btn-pos {
                margin-left: 300px;
            }
        }
        .data-pos{
            color: #796aee;
            text-align: center;
            font-size: 1.3rem;
            margin-left: 2rem;
        }
    </style>
</head>
<body>
<div class="page">
    <!-- Main Navbar-->
    <header th:replace="header::header"></header>
    <div class="page-content d-flex align-items-stretch">
        <nav class="side-navbar">
            <!-- Sidebar Header-->
            <div class="sidebar-header d-flex align-items-center">
                <div class="avatar"><img src="../../static/img/pikaqiu.jpg" alt="..." class="img-fluid rounded-circle"></div>
                <div class="title">
                    <h1 class="h4">Monkey_jie</h1>
                    <p>管理员</p>
                </div>
            </div>
            <!-- Sidebar Navidation Menus--><span class="heading">主目录</span>
            <ul class="list-unstyled">
                <li><a href="/admin/index"> <i class="icon-home"></i>主界面 </a></li>
                <li><a href="/admin/announce"> <i class="icon-padnote"></i>公告栏 </a></li>
                <li class="active"><a href="/moneyManage/show"> <i class="icon-padnote"></i>财务栏 </a></li>
                <li><a href="#exampledropdownDropdown" aria-expanded="false" data-toggle="collapse"> <i
                        class="icon-interface-windows"></i>表格 </a>
                    <ul id="exampledropdownDropdown" class="collapse list-unstyled ">
                        <li><a href="/table1">会员信息</a></li>
                        <li><a href="/table2">比赛报名</a></li>
                        <li><a href="/admin/table3">招新报名</a></li>
                    </ul>
                </li>
            </ul>
        </nav>
        <div class="content-inner">
            <!-- Page Header-->
            <header class="page-header">
                <div class="container-fluid">
                    <h2 class="no-margin-bottom">财务管理栏</h2>
                </div>
            </header>
            <!-- Breadcrumb-->
            <div class="breadcrumb-holder container-fluid">
                <ul class="breadcrumb">
                    <li class="breadcrumb-item"><a href="/admin/index">主界面</a></li>
                    <li class="breadcrumb-item">财务管理</li>
                </ul>
            </div>
            <a href="/moneyManage/add" role="button" class="btn btn-primary btn-pos">添加</a>
            <!-- Forms Section-->
            <div class="row">
                <div class="col-lg-12">
                    <div class="card">
                        <div class="card-body">
                            <div class="table-responsive">
                                <table class="table table-striped table-hover">
                                    <thead>
                                    <tr>
                                        <th>时间</th>
                                        <th>申请者</th>
                                        <th>处理者</th>
                                        <th>来源/去向</th>
                                        <th>金额</th>
                                        <th>余额</th>
                                        <th>编辑</th>
                                        <th>删除</th>
                                    </tr>
                                    </thead>
                                    <tbody>
                                    <tr th:each="page:${pages.list}">
                                        <td th:text="${page.time}"></td>
                                        <td th:text="${page.reimburse}"></td>
                                        <td th:text="${page.deal}"></td>
                                        <td th:text="${page.content}"></td>
                                        <td th:text="${page.spend}"></td>
                                        <td th:text="${page.balance}"></td>
                                        <td><a th:href="@{/moneyManage/edit(id=${page.id})}">编辑</a></td>
                                        <td><a th:href="@{/moneyManage/delete(id=${page.id})}">删除</a></td>
                                    </tr>
                                    </tbody>
                                </table>
                                <!--实现分页,page.pageNum是当前页数，page.pages是总页数-->
                                <nav aria-label="Page navigation">
                                    <ul class="pagination">
                                        <li class="page-item previous">
                                            <a class="page-link" id="previous" onclick="previousPage()" aria-label="Previous">
                                                <span aria-hidden="true">&laquo;</span>
                                            </a>
                                        </li>
                                        <input type="hidden" id="pages" th:value="${pages.pages}">
                                        <input type="hidden" id="pageNum" th:value="${pages.pageNum}">
                                        <li class="page-item active"><a class="page-link" th:href="@{/moneyManage/show(start = ${pages.pageNum})}">
                                            <span th:text="${pages.pageNum}"></span></a>
                                        </li>
                                        <li class="page-item"><a class="page-link" th:if="${pages.pageNum} &lt; ${pages.pages}"
                                                                 th:href="@{/moneyManage/show(start = ${pages.pageNum + 1})}">
                                            <span th:text="${pages.pageNum + 1}"></span></a>
                                        </li>
                                        <li class="page-item"><a class="page-link" th:if="${pages.pageNum + 1} &lt; ${pages.pages}"
                                                                 th:href="@{/moneyManage/show(start = ${pages.pageNum + 2})}">
                                            <span th:text="${pages.pageNum + 2}"></span></a>
                                        </li>
                                        <li class="page-item"><a class="page-link" th:if="${pages.pageNum + 2} &lt; ${pages.pages}"
                                                                 th:href="@{/moneyManage/show(start = ${pages.pageNum + 3})}">
                                            <span th:text="${pages.pageNum + 3}"></span></a>
                                        </li>
                                        <li class="page-item"><a class="page-link" th:if="${pages.pageNum + 3} &lt; ${pages.pages}"
                                                                 th:href="@{/moneyManage/show(start = ${pages.pageNum + 4})}">
                                            <span th:text="${pages.pageNum + 4}"></span></a>
                                        </li>
                                        <li class="page-item nextPage">
                                            <a class="page-link" id="nextPage" onclick="nextPage()" aria-label="Next">
                                                <span aria-hidden="true">&raquo;</span>
                                            </a>
                                        </li>
                                        <li>
                                            <span class="data-pos" th:text="共+${pages.pages}+页"></span>
                                        </li>
                                    </ul>
                                </nav>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <!-- Page Footer-->
            <footer th:replace="footer::footer"></footer>
        </div>
    </div>
</div>
<!-- JavaScript files-->
<script>
    function previousPage(){
        var pageNum = $('#pageNum').val()
        if (pageNum <= 1){
            $('.previous').addClass('disabled')
            alert("没有更前的页")
        }else {
            $('.previous').removeClass('disabled')
            var previous = pageNum - 1
            window.location.href = "/moneyManage/show?start=" + previous
        }
    }

    function nextPage(){
        var pageNum = $('#pageNum').val()
        var pageSize = $('#pages').val()
        if (pageNum >= pageSize){
            $('.nextPage').addClass('disabled')
            alert("没有更多的页")
        }else {
            var next = parseInt(pageNum) + 1
            $('.previous').removeClass('disabled')
            $('.nextPage').removeClass('disabled')
            window.location.href = "/moneyManage/show?start=" + next
        }
    }
</script>
<!-- JavaScript files-->
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/twitter-bootstrap/4.3.0/js/bootstrap.min.js"></script>
<script src="../../static/js/front.js"></script>
</body>
</html>